<!--  -->
<template>
  <div class="hostip">
    <div class="noticeShowM">
      <p>
        黑白名单用于针对访问IP封禁或放行策略。
      </p>
    </div>
    <div class="formip" v-loading="loading">
      <el-form :model="form">
        <el-row>
          <el-col :span="16">
            <el-form-item label="配置启用规则：" :label-width="formLabelWidth">
              <el-radio-group v-model="form.status" @change="changeStatue">
                <el-radio :label="0">禁用黑白名单</el-radio>
                <el-radio :label="1">启用黑名单</el-radio>
                <el-radio :label="2">启用白名单</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div class="guideshow"><div class="guideshow-btn" @click="guideShow"><i class="el-icon-question"></i>功能引导</div></div>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="form.status === 1">
        <div class="tit-uu"><span>配置黑名单</span></div>
        <BlackSet :dataBlackTable="dataBlackTable" :blackarea="form.blackarea" :blacklist="form.blacklist" :resetData="resetData" :ipgeo="ipgeo"/>
      </div>
      <div v-if="form.status === 2">
        <div class="tit-uu"><span>配置白名单</span></div>
        <WhiteSet :dataWhiteTable="dataWhiteTable" :whitearea="form.whitearea" :whitelist="form.whitelist" :resetData="resetData" :ipgeo="ipgeo"/>
      </div>
    </div>
    <DialoghostIpGuide ref="hostIpGuide" :changeStatueGuide="changeStatueGuide"/>
  </div>
</template>

<script>
import BlackSet from '@/pages/backend/user/host/hostip/blackWhite/BlackSet.vue'
import WhiteSet from '@/pages/backend/user/host/hostip/blackWhite/WhiteSet.vue'
import DialoghostIpGuide from '@/pages/backend/guide/DialoghostIpGuide.vue'
import storageGuide from '@/core/storageGuide.js'
export default {
  created () {
    this.show()
  },
  data () {
    return {
      loading: true,
      formLabelWidth: '120px',
      form: {
        // blackarea: [],
        // blackareaStatus: 0,
        // blacklist: [],
        // blacklistStatus: 0,
        // status: 1,
        // whitearea: [],
        // whiteareaStatus: 0,
        // whitelist: [],
        // whitelistStatus: 0
      },
      // ip增值权限
      ipgeo: 0,
      dataBlackTable: [
        {
          id: 1,
          name: '国家黑名单',
          total: '',
          statue: false
        },
        {
          id: 2,
          name: 'IP黑名单',
          total: '',
          statue: false
        }
      ],
      dataWhiteTable: [
        {
          id: 1,
          name: '国家白名单',
          total: '',
          statue: false
        },
        {
          id: 2,
          name: 'IP白名单',
          total: '',
          statue: false
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    show () {
      this.loading = true
      this.$post('/hostip4/get-host-config-ip4release', null).then(response => {
        if (response) {
          this.resetData(response)
          // 新手导引
          let isipGuide = storageGuide.getGuideOptByKey('ipGuide')
          if (!isipGuide) {
            this.$refs['hostIpGuide'].show(this.form.status)
            storageGuide.setGuideOpt('ipGuide', true)
          }
        }
      })
      this.$post('/host/get-current-host-setup', null).then(response => {
        if (response && response.ipgeo) {
          this.ipgeo = response.ipgeo
        }
        this.loading = false
      })
    },
    resetData (data) {
      this.form = JSON.parse(JSON.stringify(data))
      this.dataBlackTable[0].statue = data.blackareaStatus > 0
      this.dataBlackTable[1].statue = data.blacklistStatus > 0
      this.dataBlackTable[0].total = data.blackarea.join(', ')
      this.dataBlackTable[1].total = '已添加' + data.blacklist.length + '条'
      this.dataWhiteTable[0].statue = data.whiteareaStatus > 0
      this.dataWhiteTable[1].statue = data.whitelistStatus > 0
      this.dataWhiteTable[0].total = data.whitearea.join(', ')
      this.dataWhiteTable[1].total = '已添加' + data.whitelist.length + '条'
    },
    changeStatue () {
      this.$post('/hostip4/update-ip4release-status', {status: this.form.status}).then(response => {
        if (response) {
          this.resetData(response)
        }
      })
    },
    // 新手引导
    guideShow () {
      this.$refs['hostIpGuide'].show(this.form.status)
    },
    changeStatueGuide (status) {
      this.form.status = status
      this.changeStatue()
    }
  },
  components: {
    BlackSet,
    WhiteSet,
    DialoghostIpGuide
  }
}

</script>

<style scoped lang="scss">
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
}
.tit-uu{
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 15px;
  span{
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
    font-size: 18px;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      background: #409EFF;
    }
  }
}
.guideshow {
  text-align: right;
  line-height: 40px;
  padding-right: 50px;
  .guideshow-btn{
    color: #258FFB;
    cursor: pointer;
    display: inline-block;
    i {
      font-size: 16px;
      margin-right: 3px;
      vertical-align: middle;
    }
  }
}
</style>
